<template>
  <view v-show="isShowPage" class="scl-result-container">
    <navigationBar :my-property="navigationBarDataInfo" />

    <view class="top-stick-wrapper-small"
      :style="{'top':stickTop+'rpx',backgroundImage:'url('+staticImgs.smallTopBg+')'}" v-show="smallMenuVisible">
      <view class="box-list">

        <view class="box-item" :class="['box-item-'+i, actBoxIndex === i ? 'box-item-act' : '']" v-for="(item,i) in multipackList" :key="i" @click="toTheTop(i)"
          :style="{backgroundImage: actBoxIndex === i ? 'url('+staticImgs.smallTopBoxActBg+')' : ''}">
          {{item.boxTit}}
          <view class="abs-text" v-if="!item.reportId">待解锁</view>
        </view>

      </view>
    </view>

    <view class="top-stick-wrapper" :style="{backgroundImage:'url('+staticImgs.topBg+')'}">
      <view class="row-1">
        <view class="puzzle puzzle-iq" :class="{'puzzle-iq-act': actCategory === 'iq'}"
          :style="{backgroundImage:'url('+puzzleIqBg+')'}" @click="changeActCategory('iq')">
          <view class="puzzle-inner">
            <view class="text-main"
              :class="[ 
                subActIndex_1 === 0 && spmData.hasOwn &&actCategory === 'iq' ? 'have-res' : '',
                subActIndex_1 === 0 && spmData.hasOwn &&actCategory === 'eq' ? 'have-res-t' : '',
              ]"
              
            >
              <template v-if="actCategory == 'eq'">
                <template v-if="sbisData.hasOwn">
                  <view class="text">{{sbisData.data.data.rightQsn || ''}}</view>
                </template>
                <template v-else-if="spmData.hasOwn">
                  <view class="text">{{spmData.data.data.subConclusionFirstVal || ''}}</view>
                  <view class="text">-</view>
                  <view class="text">{{spmData.data.data.subConclusionSecondVal || ''}}</view>  
                </template>
                <template v-else>
                  <view class="text">？？？</view>
                </template>
              </template>
              <template v-else>
                <template v-if="subActIndex_1 === 0 && spmData.hasOwn">
                  <view class="text">{{spmData.data.data.subConclusionFirstVal || ''}}</view>
                  <view class="text">-</view>
                  <view class="text">{{spmData.data.data.subConclusionSecondVal || ''}}</view>  
                </template>
                <template v-else-if="subActIndex_1 === 1 && sbisData.hasOwn">
                  <view class="text">{{sbisData.data.data.rightQsn || ''}}</view>
                </template>
                <template v-else>
                  <view class="text">？？？</view>
                </template>
              </template>

            </view>
            <view class="tit">IQ值</view>
            <view class="tip-abs-box" v-if="iqValueAccuracy" :style="{backgroundImage:'url('+staticImgs.tipInfoBg+')'}">
              当前准确率：{{iqValueAccuracy}}%
            </view>

            <view class="switch-tip-box" v-if="actCategory == 'eq'">
              <image class="img" :src="staticImgs.switchTip" mode="widthFix"></image>
            </view>
          </view>
        </view>
        <view class="puzzle puzzle-eq" :style="{backgroundImage:'url('+puzzleEqBg+')'}"
          :class="{'puzzle-eq-act': actCategory === 'eq'}" @click="changeActCategory('eq')">
          <view class="puzzle-inner">
            <view class="text-main" v-if="tmmsData.hasOwn">
              {{tmmsData.data.data.scoreArr[0].score || ''}}
            </view>
            <view v-else>
              ？？？
            </view>
            <view class="tit">EQ值</view>

            <view class="switch-tip-box" v-if="actCategory == 'iq'">
              <image class="img" :src="staticImgs.switchTip" mode="widthFix"></image>
            </view>
          </view>
          
        </view>
      </view>
      <view class="row-2" :class="[actCategory == 'iq' ? 'iq-row-2' : 'eq-row-2']">
        <template v-if="actCategory == 'iq'">
          <template v-if="sbisData.hasOwn && spmData.hasOwn" >
            <view class="text">高智商助力你的人生事半功倍~</view>
          </template>
          <template v-else-if="actCategory == 'iq' && subActIndex_1 === 0" >
            <view class="text">瑞文智商测试仅能检测部分能力</view>
            <view class="text">结合斯坦福-比奈测试能给你准确的IQ值哦~~</view>
          </template>
          <template v-else-if="actCategory == 'iq' && subActIndex_1 === 1">
            <view class="text">斯坦福-比奈智商测试仅能检测你的部分能力</view>
            <view class="text">结合瑞文智商测试能给你全面的分析哦~~</view>
          </template>
        </template>
        
        <template v-else>
          <view class="text">IQ + EQ = SUCCESS</view>
          <view class="text" v-if="tmmsData.hasOwn" >高情商一定会帮助你快速成长！~</view>
          <view class="text" v-else >了解自己的双商才能更快速的成长哦~快来测试情商吧！</view>
        </template>
      </view>
      <view class="row-3">
        
        <view class="scl-list-wrapper" v-if="actCategory == 'iq'">
          <view class="scl-box" :class="{'scl-box-act':subActIndex_1 === 0}" @click="changeSubActIndex_1(0)">
            <view class="tit">瑞文智力智商测试</view>
            <view class="intro">逻辑推理+图形推理</view>
            <view class="sub-intro">IQ估值：
              <text v-if="spmData.hasOwn">{{spmData.data.data.subConclusionFirstVal}}</text>
              <text class="result" v-else>待检测</text>
            </view>
          </view>

          <view class="scl-box" :class="{'scl-box-act':subActIndex_1 === 1}" @click="changeSubActIndex_1(1)">
            <view class="tit">斯坦福-比奈智商测试</view>
            <view class="intro">言语推理+抽象推理</view>
            <view class="sub-intro">准确IQ值：
              <text v-if="sbisData.hasOwn">{{sbisData.data.data.rightQsn}}</text>
              <text class="result" v-else>待检测</text>
            </view>
          </view>
          
        </view>
        
        <view class="scl-list-block-wrapper" v-else>
          
          <view class="scl-box scl-box-act">
            <view class="left">
              <view class="tit">个人情商检测量表(TMMS)</view>
              <view class="intro">感知能力+理解能力+应对能力</view>
            </view>
            <view class="right">
              <view class="sub-intro">准确EQ值：</view>
              <text v-if="tmmsData.hasOwn">{{tmmsData.data.data.scoreArr[0].score}}</text>
              <text v-else class="result">待检测</text>
            </view>
          </view>
          
        </view>
      </view>
      
      
    </view>

    <template v-if="pageComp === 'pageOCEAN'">
      <CustomSclResultOCEAN :adSclId="adSclId" :actCategory="actCategory" :code="actBoxCode" :adCode="adCode" :otherMbtiHasDone="jobMbtiDone" :otherId="jobSclId" :showCanvas="true"
        :pageData="pageData" />
        
      <scl-result-more :showAdsWrapper1="true" :showAdsWrapper2="false" :sclId="lackSclId" ></scl-result-more>
      <view style="padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);  ">
        
      </view>
    </template>
    <template v-else-if="pageComp == 'def'">
      <NotOwnResultPageVue :btnBoxStr="btnBoxStr" :sclName="sclName" @change="changeSclStatus" :hasOwn="lackHasOwn" :scrollTopNum="scrollTopNum"
        :sclId="lackSclId" :code="actBoxCode" />
    </template>

  </view>
</template>

<script>
  import {
    unescape
  } from '@/common/utils/util.js'
  import CustomSclResultOCEAN from './CustomSclResultOCEAN.vue'
  import NotOwnResultPageVue from './NotOwnResultPage.vue'
  import sclResultMore from '@/subcontractorB/components/scl-result-more/scl-result-more.vue'


  const appData = getApp();
  
  export default {
    components: {
      CustomSclResultOCEAN,
      NotOwnResultPageVue,
      sclResultMore
    },
    data() {
      return {
        subActIndex_1: 0,
        actCategory: 'iq',
        stickTop: appData.globalData.topHeight * 2,
        reportId: '',
        sclId: '',
        appointmentOkModalVisible: false,
        fromHistory: false,
        sclInfo: {},
        reportInfo: {},
        pageData: {}, //测评结果渲染的数据（清洗后的）
        staticImgs: {
          topBg: this.imgBaseURL + '/scl/result/multipack/eq-and-iq/bg.png',
          puzzleIqBgAct: this.imgBaseURL + '/scl/result/multipack/eq-and-iq/puzzle-iq-act.png',
          puzzleEqBgDef: this.imgBaseURL + '/scl/result/multipack/eq-and-iq/puzzle-eq-def.png',
          puzzleIqBgDef: this.imgBaseURL + '/scl/result/multipack/eq-and-iq/puzzle-iq-def.png',
          puzzleEqBgAct: this.imgBaseURL + '/scl/result/multipack/eq-and-iq/puzzle-eq-act.png',
          tipInfoBg: this.imgBaseURL + '/scl/result/multipack/eq-and-iq/tip-info-bg.png',
          smallTopBg: this.imgBaseURL + '/scl/result/multipack/eq-and-iq/small-top-bg.png',
          smallTopBoxActBg: this.imgBaseURL + '/scl/result/multipack/eq-and-iq/small-top-act-box-bg.png',

          switchTip: this.imgBaseURL + '/scl/result/multipack/eq-and-iq/switch-tip.jpg',
        },
        navigationBarDataInfo: {
          "bg_color": "#fff",
          "color": "#333",
          "flag": 1,
          "name": "",
          "hasEntity": true,
        },
        scrollTopNum: 0,
        actBoxIndex: 0,
        pageComp: "",
        // lackSclId:"",
        currentData: {},
        multipackList: [
          {
            code: 'spm',
            category: 'iq',
            boxTit: '瑞文测试',
            sclName:'瑞文智力智商测试',
            reportId: '',
            sclId: '',
            hasOwn:false,
            data: {
              pageComp: 'def',
            },
          },{
            code: 'sbis',
            category: 'iq',
            boxTit: '斯坦福测试',
            sclName:'斯坦福-比奈国际标准智商测试',
            reportId: '',
            sclId: '',
            hasOwn:false,
            data: {
              pageComp: 'def',
            },
          },
          {
            category: 'eq',
            code:'tmms',
            boxTit: '情商测试',
            sclName:'个人情商检测量表（TMMS）',
            reportId: '',
            sclId: '',
            hasOwn:false,
            data: {
              pageComp: 'def',
            },
          }
        ],
        smallMenuTopNum: 999,
        smallMenuVisible: false,
        lastSubActIndex:0,
      }
    },
    computed: {
      jobMbtiDone() {
        return !!this.multipackList[0].reportId
      },
      loveMbtiDone() {
        return !!this.multipackList[1].reportId
      },
      
      isShowPage() {
        return true
      },
      loveSclId() {
        return this.multipackList[1].sclId
      },
      jobSclId() {
        return this.multipackList[0].sclId
      },
      actBoxCode() {
        return this.multipackList[this.actBoxIndex].code
      },
      lackSclId() {
        return this.multipackList[this.actBoxIndex].sclId
      },
      lackHasOwn() {
        return this.multipackList[this.actBoxIndex].hasOwn
      },
      iqValueAccuracy(){
        if(!this.multipackList[0].hasOwn && !this.multipackList[1].hasOwn){
          return 0
        }else if(this.multipackList[0].hasOwn && this.multipackList[1].hasOwn){
          return 95
        }else{
          return 87
        }
      },
      spmData(){
        return this.multipackList[0]
      },
      adCode(){
        if(this.actBoxCode == 'spm'){
          if(!this.sbisData.hasOwn){
            return 'sbis'
          }else if(!this.tmmsData.hasOwn){
            return 'tmms'
          }
        }else if(this.actBoxCode == 'sbis'){
          if(!this.spmData.hasOwn){
            return 'spm'
          }else if(!this.tmmsData.hasOwn){
            return 'tmms'
          }
        }else if(this.actBoxCode == 'tmms'){
          if(!this.spmData.hasOwn){
            return 'spm'
          }else if(!this.sbisData.hasOwn){
            return 'sbis'
          }
        }
        
        return ''
      },
      sbisData(){
        return this.multipackList[1]//.data
      },
      adSclId(){
        // 
        if(this.adCode){
          return this.multipackList.find(item => item.code == this.adCode).sclId
        }else{
          return ''
        }
      },
      tmmsData(){
        return this.multipackList[2]
      },
      puzzleIqBg() {
        return this.actCategory == 'iq' ? this.staticImgs.puzzleIqBgAct : this.staticImgs.puzzleIqBgDef
      },
      puzzleEqBg() {
        return this.actCategory == 'eq' ? this.staticImgs.puzzleEqBgAct : this.staticImgs.puzzleEqBgDef
      },
      sclName(){
        return this.multipackList[this.actBoxIndex].sclName
      },
      btnBoxStr(){
        return this.actCategory == 'iq' ? '开始检测我的IQ' : '开始检测我的EQ'
      }
    },
    onLoad(opt) {
      this.reportId = opt.reportId
      this.sclId = opt.sclId
      this.fromHistory = opt.fromHistory
      this.initPageData()

      this.$nextTick(() => {
        this.getTopMenuHeight()
      })
    },
    methods: {
      changeActCategory(category) {
        this.actCategory = category
        if(category == 'eq'){
          this.actBoxIndex = 2
          this.lastSubActIndex = this.subActIndex_1
          this.subActIndex_1 = 0
        }else if(category == 'iq'){
          this.actBoxIndex = this.lastSubActIndex
        }
        
        this.changeBox(this.actBoxIndex)
      },
      changeSubActIndex_1(index) {
        this.subActIndex_1 = index
        this.changeBox(index)
      },
      toTheTop(index) {
        uni.pageScrollTo({
          duration: 300,
          scrollTop: 0
        });

        setTimeout(() => {
          this.changeBox(index)
        }, 300)
      },
      getTopMenuHeight() {
        const that = this;

        const query = uni.createSelectorQuery().in(that);
        query.select('.top-stick-wrapper').boundingClientRect(data => {
          this.smallMenuTopNum = data.height
        }).exec();
      },
      changeSclStatus() {
        this.multipackList[this.actBoxIndex].hasOwn = true
      },
      changeBox(index) {
        if (index == this.index) {
          return this.$showToast('当前已是该类型结果')
        }
        if (this.multipackList[index].data) {
          this.pageComp = this.multipackList[index].data.pageComp
          this.pageData = this.multipackList[index].data.data
        }
        
        if(index === 2){
          this.actCategory = 'eq'
        }else{
          this.actCategory = 'iq'
        }
        
        this.subActIndex_1 = index == 2 ? 0 : index

        this.actBoxIndex = index
      },
      percentValue(current, max) {
        if (max === 0) {
          // 防止除以零
          return 0
        }
        return (current / max) * 100
      },
      setActIndex() {
        //查找multipackList里符合sclId为sclId的索引，赋给actBoxIndex
        console.log(JSON.stringify(this.multipackList), '======this.multipackList=====', this.sclId)
        this.actBoxIndex = this.multipackList.findIndex(item => item.sclId == this.sclId)
        let tmpActCategory = 'iq'
        if(this.multipackList[this.actBoxIndex].code === 'spm'){
          this.subActIndex_1 = 0
        }else if(this.multipackList[this.actBoxIndex].code === 'sbis'){
          this.subActIndex_1 = 1
        }else if(this.multipackList[this.actBoxIndex].code === 'tmms'){
          this.subActIndex_1 = 0
          tmpActCategory = 'eq'
        }
        this.actCategory = tmpActCategory
        
        this.navigationBarDataInfo.name = this.multipackList[this.actBoxIndex].boxTit
        console.log(this.multipackList[this.actBoxIndex].code,'----this.multipackList[this.actBoxIndex].code')
        console.log(this.subActIndex_1,'-----this.subActIndex_1-----this.subActIndex_1')
      },
      async initPageData() {
        console.log('----------------------getReport----------------------------')
        const {
          data: reportRes
        } = await this.$u.api.getReportInfo({
          reportId: this.reportId
        })

        const {
          data: sclRes
        } = await this.$u.api.getSclInfo({
          sclId: this.sclId,
          reportId: this.reportId
        })

        // this.setActIndex() //设置当前选中的是那个测评
        await this.initMultipackData(sclRes, reportRes)
      },
      async initMultipackData(sclRes, reportRes) {
        const res = reportRes.data
        const mainResultD = JSON.parse(sclRes.data.scloReportDetail) || {}
        console.log(mainResultD, '======mainResultD========')
        const tmpMultipackList = mainResultD.scl_iq_list || {}

        //设置当前的
        if (mainResultD && JSON.stringify(mainResultD) != '{}') {
          this.pageComp = 'pageOCEAN'
          this.pageData = this.processResultDataToRenderDataOCEAN(res, mainResultD)
          
        }

        let tmpData = []
        const promises = this.multipackList.map(async item => {
          console.log(tmpMultipackList, '-----sclId-----', item)

          // console.log('----tmpMultipackList[item.code]----',tmpMultipackList[item.code])
          item.hasOwn = tmpMultipackList[item.code].status > 1
          item.sclId = tmpMultipackList[item.code].scl_id

          if (tmpMultipackList[item.code].report_id) {
            item.hasOwn = true
            item.reportId = tmpMultipackList[item.code].report_id
            item.sclId = tmpMultipackList[item.code].scl_id
            

            if (tmpMultipackList[item.code].report_id != this.reportId) {
              item.data = await this.getReportById(item.sclId, item.reportId)
              // console.log(item.data,'====item.data')
              item.data = JSON.parse(JSON.stringify(item.data))
              // console.log(JSON.stringify(item.data))
              console.log(item.data, '-----item.data.multipackResultSmallImg')
              item.multipackResultSmallImg = item.data.data.multipackResultSmallImg
              item.multipackResultImg = item.data.data.multipackResultImg

              console.log(item, '-------------item---------')
            }
          }

          tmpData.push(item)
        })

        console.log(promises, '-----dd')

        await Promise.all(promises)
        console.log(this.multipackList, '======this.multipackList')

        this.setActIndex()
        this.multipackList[this.actBoxIndex].data = {
          data: this.pageData,
          pageComp: this.pageComp
        }


        console.log(this.actBoxIndex, '====this.actBoxIndex')
        this.multipackList[this.actBoxIndex].reportId = this.reportId
        this.multipackList[this.actBoxIndex].multipackResultImg = this.pageData.multipackResultImg
        this.multipackList[this.actBoxIndex].multipackResultSmallImg = this.pageData.multipackResultSmallImg




        console.log(this.multipackList, '======this.multipackList')

      },
      async getReportById(sclId, reportId) {
        const {
          data: reportRes
        } = await this.$u.api.getReportInfo({
          reportId: reportId
        })

        const {
          data: sclRes
        } = await this.$u.api.getSclInfo({
          sclId: sclId,
          reportId: reportId
        })

        const res = reportRes.data
        const mainResultD = JSON.parse(sclRes.data.scloReportDetail) || {}
        const tmpMultipackList = mainResultD.scl_mbti_list || {}

        console.log('-----------getReportById：', sclId, tmpMultipackList)
        if (mainResultD && JSON.stringify(mainResultD) != '{}') {
          return {
            pageComp: 'pageOCEAN',
            data: this.processResultDataToRenderDataOCEAN(res, mainResultD)
          }
        }

      },
      processResultDataToRenderDataOCEAN(dData, mainResultD) {
        //维度信息
        let tmpScoreArr = []

        //最终结论
        let conclusion = ''

        let subConclusion = ''

        //常模数据
        let commonModelData = []

        //常模对象
        let normComparison = null

        //建议
        let suggestions = null

        let multipackResultImg = ''
        let multipackResultSmallImg = ''

        let totalScore = 0

        //结果详解
        let detailedResults = {
          contentArr: []
        }

        let mainImg = ''

        let tmpPushResultArr = []
        // const tmpResultContentArr = []

        const myRadarDataStrArr = []
        const myRadarDataScoreArr = []
        console.log(mainResultD, '=====mainResultD====')

        if (mainResultD.cutIndex) {
          //根据score,由大到小排序，然后截取
          dData.resultList = dData.resultList.sort((a, b) => b.score - a.score)
          dData.resultList = dData.resultList.slice(0, mainResultD.cutIndex)
        }


        if (mainResultD.useCustomAlgorithmToMainConculsion) {
          const conclusionObj = this.calculateConclusion(mainResultD.mainAlgorithmJson, dData.resultSetMap)
          if (conclusionObj) {
            console.log(conclusionObj, '=======conclusionObj')
            conclusion = conclusionObj.conclusion
            subConclusion = conclusionObj.subConclusion
            tmpPushResultArr = conclusionObj.detailedResults.contentArr
            suggestions = conclusionObj.detailedResults.suggestions
            mainImg = conclusionObj.mainImg
          }
        } else if (mainResultD.useAllCustomAlgorithmToMainConculsion) {

        }

        if (mainResultD.useHighestScoreDimensionResult) {
          // 使用最高分值维度的结果
          console.log('----- mainResultD.useHighestScoreDimensionResult -----')
          const findHighestScore = (arr) => {
            if (arr.length === 0) {
              return null; // 返回 null 表示数组为空
            }

            let highestIndex = 0
            let highestScore = arr[highestIndex].myScore // 假设第一个元素是分值最高的
            for (let i = 1; i < arr.length; i++) {
              if (arr[i].myScore > highestScore) {
                highestScore = arr[i].myScore // 更新分值最高的元素
                highestIndex = i
              }
            }
            return arr[highestIndex] // 返回分值最高的元素
          }
          const finalObj = findHighestScore(dData.resultSetMap)
          console.log(finalObj, '---------finalObj')

          dData.resultList.map((item, index) => {
            if (item.dmnsName == finalObj.dmnsName) {

              const tmpObj = JSON.parse(unescape(item.resultDesc))
              detailedResults = tmpObj.detailedResults || {
                contentArr: []
              }
              conclusion = tmpObj.conclusion
              subConclusion = tmpObj.subConclusion
            }

            if (mainResultD.hasRadarGraph) {
              myRadarDataStrArr.push(item.dmnsName)
              myRadarDataScoreArr.push(item.score)
            }
          })

        } else if (mainResultD.dimensionsType == '1' && !mainResultD.useAllCustomAlgorithmToMainConculsion) {
          tmpScoreArr = dData.resultList.map((item, index) => {
            console.log(item, '=======item')
            if (index === 0) {
              if (mainResultD.useFirstResultConclusion) {
                totalScore = item.score
                console.log(item.resultDesc, '===item.resultDesc')
                const tmpObj = JSON.parse(unescape(item.resultDesc))
                conclusion = tmpObj.conclusion
                subConclusion = tmpObj.subConclusion
                detailedResults = tmpObj.detailedResults || {}
                multipackResultImg = tmpObj.multipackResultImg
                multipackResultSmallImg = tmpObj.multipackResultSmallImg
                console.log(tmpObj.suggestions, '===========tmpObj.suggestions')
                // 判断tmpObj.suggestions是否是对象

                try {
                  suggestions = tmpObj.suggestions ? JSON.parse(tmpObj.suggestions) : null
                } catch (e) {
                  suggestions = this.$lodash.isObject(tmpObj.suggestions) ? tmpObj.suggestions : null
                }
                suggestions = this.$lodash.isEmpty(suggestions) ? null : suggestions
              } else if (mainResultD.useCustomAlgorithmResults) {
                console.log('使用自定义算法计算')

                // const tmpObj = JSON.parse(unescape(item.resultDesc))
                const finalMainResult = this.determineSexualOrientation(dData.resultSetMap, mainResultD
                  .algorithmJson)
                console.log(finalMainResult, '=========finalMainResult')
                conclusion = '您的性取向是：' + finalMainResult.conclusion
                detailedResults = finalMainResult.detailedResults
                mainImg = finalMainResult.mainImg
                // console.log(rrr,'=======rrr')
              }
            }

            if (mainResultD.hasRadarGraph || mainResultD.useSubCompContent) {
              myRadarDataStrArr.push(item.dmnsName)
              myRadarDataScoreArr.push(item.score)

              if (mainResultD.hasCommonModelRadarData) {
                console.log(item.dmnsName, '-----------item.dmnsName')
                if (item.dmnsName) {
                  console.log(mainResultD.commonModelRadarData, '=========mainResultD.commonModelRadarData')
                  const currentHeathNum = mainResultD.commonModelRadarData.find(node => item.dmnsName === node
                    .key).data
                  commonModelData.push(currentHeathNum)
                }

              }

              console.log('--mainResultD.hasRadarGraph--', detailedResults)

              try {
                const parseObj = JSON.parse(unescape(item.resultDesc))
                console.log(parseObj, '================parseObj')
                const tmpResultContentArr = parseObj.contentArr
                if (!detailedResults.contentArr) {
                  detailedResults.contentArr = []
                }
                console.log(tmpResultContentArr, '========================tmpResultContentArr')

                detailedResults.contentArr.push({
                  tit: item.dmnsName,
                  contentArr: tmpResultContentArr,
                  hasLine: true
                })
              } catch (e) {

              }
            }

            if (mainResultD.scoreInfoType == '1') {
              if (index === 0 && (mainResultD.useFirstResultConclusion || mainResultD
                  .useCustomAlgorithmResults)) {
                return {
                  label: "总分",
                  score: item.score,
                  str: item.resultTitle,
                }

              } else {
                return {
                  label: item.dmnsName,
                  score: item.score,
                  str: item.resultTitle,
                }
              }

            } else if (mainResultD.scoreInfoType == '2') {
              const healthScore = JSON.parse(unescape(item.resultDesc)).healthScore
              return {
                score: item.score,
                healthScore
              }
            } else if (mainResultD.scoreInfoType == '3') {
              if (index === 0 && (mainResultD.useFirstResultConclusion || mainResultD
                  .useCustomAlgorithmResults)) {
                return {
                  label: '总分',
                  str: item.score
                }
              } else {
                return {
                  label: item.dmnsName,
                  str: item.score
                }
              }
            } else if (mainResultD.scoreInfoType == '4') {
              console.log(item.resultDesc, '======item.resultDesc')
              const tmpObj = JSON.parse(unescape(item.resultDesc))
              if (index === 0 && mainResultD.useFirstResultConclusion) {
                detailedResults = tmpObj.detailedResults || {}
                detailedResults.contentArr = [] //清空
                return {
                  label: '总分',
                  score: item.score,
                  conclusion: tmpObj.shortConclusion,
                  healthScore: tmpObj.healthScore
                }

              } else {
                console.log(detailedResults, '====detailedResults')
                detailedResults.contentArr.push(
                  tmpObj.detailedResults
                )
                return {
                  label: item.dmnsName,
                  score: item.score,
                  conclusion: tmpObj.shortConclusion,
                  healthScore: tmpObj.healthScore
                }

              }


              // const parseObj = JSON.parse(unescape(item.resultDesc))

            }
          })
        }


        //雷达图信息
        let radarData = null
        if (mainResultD.hasRadarGraph) {
          if (!myRadarDataStrArr[0]) {
            //去除总分的雷达信息
            myRadarDataStrArr.shift()
            myRadarDataScoreArr.shift()
          }
          console.log(myRadarDataStrArr, '-------myRadarDataStrArr')
          radarData = {
            "categories": myRadarDataStrArr,
            "series": [{
              "name": "数据",
              "color": "#FEB069",
              "data": myRadarDataScoreArr,
              "index": 0,
              "pointShape": "square",
              "show": true,
              "labelShow": false,
              "textColor": "rgba(0,0,0,1)",
              "type": "radar"
            }],
            "legend": {
              "show": false
            },
          }

          if (mainResultD.hasCommonModelRadarData) {
            radarData.series[0].color = "#6B77FF"
            radarData.series.push({
              "name": "常模",
              "color": "#FEB069",
              "data": commonModelData,
              "index": 0,
              "pointShape": "square",
              "show": true,
              "labelShow": false,
              "textColor": "rgba(0,0,0,1)",
              "type": "radar"
            })

          }
        }
        console.log(suggestions, '===suggestions')
        dData.createDate = Number(dData.createDate)

        console.log(mainImg, '-------mainImg')

        if (tmpPushResultArr && tmpPushResultArr.length > 0) {
          detailedResults.contentArr = [...detailedResults.contentArr, ...tmpPushResultArr]

          console.log(detailedResults.contentArr, '=============detailedResults.contentArr')
        }
        console.log(mainResultD,
          '===============================mainResultDmainResultDmainResultDmainResultDmainResultD')
        console.log(detailedResults, '=======detailedResults')

        console.log(multipackResultImg, multipackResultSmallImg,
          '----multipackResultSmallImg---multipackResultSmallImg-multipackResultSmallImg')
          
        let subConclusionFirstVal
        let subConclusionSecondVal
        if(subConclusion){
          subConclusionFirstVal = this.extractFirstNumber(subConclusion)
          subConclusionSecondVal = this.extractLastNumber(subConclusion)
        }
          
        //最终完成的破事
        return {
          id: this.reportId,
          serialNumber: dData.serialNumber,
          name: dData.sclName,
          sclTime: this.$dayjs(dData.createDate).format("YYYY-MM-DD HH:mm"),
          createTime: this.$dayjs(dData.createDate).format("YYYY-MM-DD HH:mm"),
          scoreArr: tmpScoreArr,
          firstScore: dData.resultList && dData.resultList[0] && dData.resultList[0].score,
          radarData,
          dimensionsType: mainResultD.dimensionsType,
          scoreInfoType: mainResultD.scoreInfoType,
          hasRadarGraph: mainResultD.hasRadarGraph,
          literatrue: mainResultD.literatrue,
          multipackResultImg,
          multipackResultSmallImg,
          sciencePopularization: mainResultD.sciencePopularization,
          detailedResults,
          conclusion,
          subConclusion,
          suggestions,
          radarMax: mainResultD.radarMax,
          imgAndScoreBlockType: mainResultD.imgAndScoreBlockType,
          otherTipText: mainResultD.otherTipText,
          otherTipImg: mainResultD.otherTipImg,
          mainImg,
          normComparison,
          qsnMax: mainResultD.qsnMax,
          rightQsn: totalScore,
          subConclusionFirstVal,
          subConclusionSecondVal,
          scoreInfoRightStr: mainResultD.scoreInfoRightStr,
        }


        // console.log(this.pageDataCommon, '====this.pageDataCommon')
      },
      extractFirstNumber(s) {
        const match = s.match(/\d+/);
        console.log(match,'-----match------')
        return match ? match[0] : null;
      },
      extractLastNumber(s) {
        const matches = s.match(/\d+/g);
        return matches ? matches[matches.length - 1] : null;
      }
    },
    
    onPageScroll(e) {
      if (e.scrollTop > this.smallMenuTopNum) {
        this.smallMenuVisible = true
      } else {
        this.smallMenuVisible = false
      }
      this.scrollTopNum = e.scrollTop
    },
  }
</script>

<style lang="scss" scoped>
  .top-stick-wrapper {
    width: 750rpx;
    // height: 936rpx;
    padding-bottom: 58rpx;
    box-sizing: border-box;
    background-repeat: no-repeat;
    background-size: 100%;
    padding-top: 190rpx;

    .row-1 {
      position: relative;
      width: 696rpx;
      height: 406rpx;
      margin: auto;

      .puzzle {
        background-repeat: no-repeat;
        background-size: 100% 100%;

        position: absolute;
        z-index: 1;


        .puzzle-inner {
          position: relative;
          width: 100%;
          height: 100%;
          box-sizing: border-box;


          display: flex;
          flex-direction: column;


          .switch-tip-box {
            position: absolute;
            width: 230rpx;
            height: 90rpx;
            animation: shakeTopToBottom 2.2s infinite;

            .img {
              width: 100%;
              height: 100%;
            }
          }

          .tit {
            font-family: PingFang-SC, PingFang-SC;
            font-weight: bold;
            font-size: 28rpx;
            color: #153573;
            line-height: 40rpx;
            text-align: center;
            font-style: normal;

            position: absolute;
          }
        }
      }



      .puzzle-iq {

        width: 300rpx;
        height: 300rpx;
        left: 60rpx;
        top: 44rpx;

        .puzzle-inner {

          .switch-tip-box {
            left: 24rpx;
            top: 0;
          }
          
          
          
          .text-main{
            font-family: PingFang-SC, PingFang-SC;
            font-weight: 800;
            font-size: 50rpx;
            color: #2557B4;
            line-height: 40rpx;
            text-align: center;
            font-style: normal;
            
            
            padding-top: 158rpx;
            padding-left: 86rpx;
          }

          
          
          .have-res{
            padding-top: 108rpx;
            padding-left: 86rpx;
          }
          
          .have-res-t{
            padding-top: 120rpx;
          }
          
          .tip-abs-box {
            position: absolute;
            bottom: -20px;
            left: -25rpx;
          
            width: 290rpx;
            height: 100rpx;
          
            box-sizing: border-box;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 28rpx;
            color: #4883EC;
          
            // line-height: 40rpx;
            text-align: center;
            font-style: normal;
          
            background-repeat: no-repeat;
            font-style: normal;
            background-size: 100% 100%;
          
            padding-top: 34rpx;
          }
          

          .text {
            width: 90rpx;
            text-align: center;
          }

          .tit {
            top: 320rpx;
            left: 120rpx;
          }
        }
      }

      // puzzle-iq ==== end


      .puzzle-iq-act {
        width: 406rpx;
        height: 406rpx;
        left: 22rpx;
        top: 0;

        .puzzle-inner {

          .switch-tip-box {
            left: 24rpx;
            top: 0;
          }

          .text-main{
            font-family: PingFang-SC,
            PingFang-SC;
            font-weight: 800;
            font-size: 50rpx;
            color: #153573;
            line-height: 46rpx;
            font-style: normal;
            
            
            
            padding-top: 204rpx;
            padding-left: 128rpx;
          }
          
          .have-res{
            padding-top: 142rpx;
            padding-left: 128rpx;
          }

          .tip-abs-box {
            position: absolute;
            bottom: 16rpx;
            left: 24rpx;

            width: 290rpx;
            height: 100rpx;

            box-sizing: border-box;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 28rpx;
            color: #4883EC;

            // line-height: 40rpx;
            text-align: center;
            font-style: normal;

            background-repeat: no-repeat;
            font-style: normal;
            background-size: 100% 100%;

            padding-top: 34rpx;
          }

          .text {
            width: 90rpx;
            text-align: center;
          }

          .tit {
            bottom: -6rpx;
            top: auto;
            left: 146rpx;
          }
        }
      }

      // puzzle-iq-act ==== end


      .puzzle-eq {
        width: 302rpx;
        height: 302rpx;
        right: 54rpx;
        top: 56rpx;



        .puzzle-inner {

          .switch-tip-box {
            left: -8rpx;
            top: -22rpx;
          }

          // .text-main{
            font-family: PingFang-SC,
            PingFang-SC;
            font-weight: 800;
            font-size: 50rpx;
            color: #2557B4;
            line-height: 70rpx;
            // text-align: center;
            font-style: normal;

            padding-top: 136rpx;
            padding-left: 76rpx;

          .text {
            // width: 90rpx;
            text-align: left;
          }

          .tit {
            bottom: -54rpx;
            left: 82rpx;
            color: #2557B4;
          }
        }
      }
      
      // puzzle-eq ==== end
      
      .puzzle-eq-act {
          width: 388rpx;
          height: 388rpx;
          right: 40rpx;
          top: 0;
      
      
      
          .puzzle-inner {
      
            .switch-tip-box {
              left: -8rpx;
              top: -22rpx;
            }
      
            .text-main{
              font-family: PingFang-SC,
              PingFang-SC;
              font-weight: 800;
              font-size: 50rpx;
              color: #2557B4;
              font-style: normal;
            }
            padding-top: 186rpx;
            padding-left: 116rpx;
            
            .text {
              text-align: left;
            }
      
            .tit {
              bottom: auto;
              top: 362rpx;
              left: 136rpx;
              color: #2557B4;
            }
          }
        }
      

    }

    .row-2 {
      margin: 20rpx auto;

      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 26rpx;
      color: #5078B3;
      line-height: 37rpx;
      letter-spacing: 1px;
      text-align: center;
      font-style: normal;

      .text {
        text-align: center;
      }
    }
    
    .eq-row-2{
      
      margin-top: 4rpx;
      font-family: PingFang-SC, PingFang-SC;
      font-weight: normal;
      // font-size: 34rpx;
      font-size: 26rpx;
      color: #5078B3;
      // line-height: 48rpx;
      letter-spacing: 1px;
      text-align: center;
      font-style: normal;
    }

    .row-3 {
      .scl-list-wrapper {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        column-gap: 28rpx;

        .scl-box {
          display: flex;
          flex-direction: column;
          align-items: center;

          width: 334rpx;
          height: 187rpx;
          background: linear-gradient(180deg, #B4CEFE 0%, rgba(255, 255, 255, 0.16) 52%, #FFFFFF 100%);
          border-radius: 24rpx;
          border: 1px solid #B0B3B5;

          box-sizing: border-box;

          .tit {
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 28rpx;
            color: #333333;
            line-height: 40rpx;
            text-align: center;
            font-style: normal;

            width: 284rpx;
            padding-bottom: 8rpx;
            border-bottom: 1px solid #B1C7E7;
            padding-top: 16rpx;
          }

          .intro {
            font-family: PingFang-SC, PingFang-SC;
            font-weight: bold;
            font-size: 30rpx;
            color: #153573;
            line-height: 42rpx;
            text-align: center;
            font-style: normal;

            margin-top: 10rpx;
            margin-bottom: 8rpx;
          }

          .sub-intro {
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 26rpx;
            color: #333333;
            line-height: 37rpx;
            text-align: left;
            font-style: normal;

            .result {
              color: rgba(153, 153, 153, 1);
            }
          }


        }

        .scl-box-act {
          border: 4rpx solid #548FFB;
        }

      }
      
      .scl-list-block-wrapper{
        display: flex;
        flex-direction: column;
        
        .scl-box{
          display: flex;
          align-items: center;
          margin: auto;
          
          width: 700rpx;
          height: 128rpx;
          background: linear-gradient( 180deg, #B4CEFE 0%, rgba(255,255,255,0.16) 52%, #FFFFFF 100%);
          border-radius: 24rpx;
          border: 4rpx solid #548FFB;
          
          .left{
            width: 464rpx;
            box-sizing: border-box;
            padding-left: 20rpx;
            .tit{
              font-family: PingFangSC, PingFang SC;
              font-weight: 400;
              font-size: 28rpx;
              color: #333333;
              line-height: 40rpx;
              text-align: left;
              font-style: normal;
            }
            .intro{
              font-family: PingFang-SC, PingFang-SC;
              font-weight: bold;
              font-size: 32rpx;
              color: #153573;
              line-height: 45rpx;
              text-align: left;
              font-style: normal;
            }
          }
          
          .right{
            display: flex;
            align-items: center;
            
            border-left: 1rpx solid #B1C7E7;
            height: 54rpx;
            width: 260rpx;
            padding-left: 24rpx;
            box-sizing: border-box;
            
            .sub-intro{
              font-family: PingFangSC, PingFang SC;
              font-weight: 400;
              font-size: 26rpx;
              color: #333333;
              line-height: 37rpx;
              text-align: left;
              font-style: normal;
            }
            .result{
              font-weight: bold;
              font-family: PingFangSC, PingFang SC;
              font-size: 26rpx;
              color: #333333;
              line-height: 37rpx;
              text-align: left;
              font-style: normal;
            }
          }
          
        }
      }
    }
  }

  @keyframes showDivAni {
    0% {
      opacity: 0;
    }

    100% {
      opacity: 1;
    }
  }

  @keyframes shakeTopToBottom {
    0% {
      transform: translate(0px, 0px);
    }

    50% {
      transform: translate(0px, -10px);
    }

    100% {
      transform: translate(0px, 0px);
    }
  }


  .top-stick-wrapper-small {
    // background: linear-gradient( 180deg, #34159A 0%, rgba(139,118,255,0.87) 100%);
    // box-shadow: 0rpx 1rpx 30rpx 0rpx #6C54D4;
    // opacity: 0.85;
    position: fixed;
    top: 0;
    z-index: 12;
    animation: showDivAni .8s 1;


    background-repeat: no-repeat;
    background-size: 100% 100%;

    width: 750rpx;
    height: 170rpx;

    .box-list {
      display: flex;
      justify-content: center;
      column-gap: 30rpx;
      margin-top: 42rpx;

      .box-item-act {
        // background: #9FBBFF;
        // border: 2rpx solid #5A81CA;
        // box-sizing: border-box;

        font-family: PingFang-SC, PingFang-SC;
        font-weight: 800;
        font-size: 30rpx;
        color: #032A73 !important;
        // line-height: 42rpx;
        letter-spacing: 1px;
        text-align: left;
        font-style: normal;
      }

      // .box-item-1{
      //   background: linear-gradient( 180deg, #9178D3 0%, #E8C1F8 100%);
      //   border-radius: 10rpx;
      // }
      // .box-item-2{
      //   background: linear-gradient( 180deg, #B4A6DB 0%, #ECBFBE 100%);
      //   border-radius: 10rpx;
      // }

      .abs-border {
        position: absolute;
        left: -6rpx;
        top: -6rpx;
        right: -6rpx;
        bottom: -8rpx;

        .img {
          width: 100%;
          height: 100%;
        }
      }
      
      


      .box-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
        // justify-content: flex-end;
        justify-content: center;
        content: "";

        box-sizing: border-box;
        width: 210rpx;
        height: 100rpx;
        border-radius: 10rpx;

        background: linear-gradient(180deg, #72AEFD 0%, #76ADF6 100%);
        box-shadow: inset 0rpx 1rpx 20rpx 0rpx #4F8AE6;

        background-repeat: no-repeat;
        background-size: 100% 100%;

        font-family: PingFang-SC, PingFang-SC;
        font-weight: 800;
        font-size: 30rpx;
        color: #FFFFFF;
        // line-height: 42rpx;
        // letter-spacing: 1px;
        text-align: left;
        font-style: normal;

        position: relative;


        .abs-text {
          top: -14rpx;
          right: 0;
          position: absolute;

          width: 80rpx;
          height: 28rpx;
          background: #FFFFFF;
          border-radius: 0rpx 7rpx 0rpx 8rpx;

          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 20rpx;
          color: #241089;
          line-height: 28rpx;
          text-align: center;
          font-style: normal;
        }


      }
    }

  }
</style>